<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh',height: '100%'}">
      <Sider width="92" :collapsed-width="78" v-model="isCollapsed" class="aaa">
        <div class="shopper-logo disFlex Flex-center">
          <img alt :src="logo_src" />
        </div>
        <div
          class="oneMenu"
          v-for="(item,index) in classAList"
          @mouseenter="changeTwoList(index)"
          @mouseleave="leaveTwoList"
          @click="selectOneList(index,item.classA[0].path)"
        >
          <div :class="oneSelected == index ? 'oneTitle oneSelected':'oneTitle'">
            <Icon :type="item.icon" />
            &nbsp&nbsp&nbsp{{item.title}}
          </div>
        </div>

        <div class="platform-logo disFlex Flex-center" @click="tapHomeLogo">
          <img src="https://www.banchengyun.com/public/image/back/logo.png" />
        </div>
      </Sider>
      <div class="twoMenu">
        <div class="oneTitle">
          <span>{{classAList[oneSelected].title}}</span>
        </div>
        <div class="twoTitle">
          <Col span="8" style="width:132px">
            <Menu theme="light" width="132" mode="vertical">
              <MenuItem
                v-for="(two,index) in twoList"
                :key="index"
                :name="index"
                :to="two.path"
                :class="twoSelected == index?'ivu-menu-item-active':''"
              >
                <div @click="selectedTwo(index)">{{two.title}}</div>
              </MenuItem>
            </Menu>
          </Col>
        </div>
      </div>
      <Layout>
        <Header
          v-if="classCList.length != 0"
          class="layout-header-bar disFlex Flex-middle Flex-between"
        >
          <Menu
            ref="topMenu"
            mode="horizontal"
            theme="light"
            :active-name="$route.matched[2].meta.classCName"
          >
            <MenuItem
              style="padding: 0 10px;"
              v-for="(item,index) in classCList"
              :name="item.classCName"
              :key="index"
              :to="item.path"
            >
              <Icon :type="item.icon" />
              {{item.title}}
            </MenuItem>
          </Menu>
          <div class="disFlex Flex-middle">
            <div class="header-btn">
              <a
                class="header-btn"
                href="https://www.yuque.com/books/share/9c9394a9-54c7-467e-8d81-c7907c03605e"
                target="_blank"
              >
                <img
                  src="https://file.open.banchengyun.com/2019/02/25/155106305639052.png"
                  style="width:18px;height:20px;"
                />
                &nbsp帮助文档
              </a>
            </div>
            <!-- <div class="header-btn">
              <a @click="$router.push('/survey/surveyContent/notice')" target="_blank">
                <img
                  src="https://file.open.banchengyun.com/2019/02/25/155106305621330.png"
                  style="width:18px;height:20px;margin-top:20px"
                >
              </a>
            </div>-->
            <Dropdown @on-click="cancellationFn" style="margin-right:24px;">
              <div class="account-wrapper">
                {{userRealname}}
                <Icon type="ios-arrow-down"></Icon>
              </div>
              <DropdownMenu slot="list" style="width: 140px;">
                <DropdownItem name="cancellation">退出登录</DropdownItem>
                <!-- <DropdownItem name="oldEdition">返回旧版</DropdownItem> -->
              </DropdownMenu>
            </Dropdown>
            <div class="option-btn">
              <div @click="changeRightSide" class="disFlex Flex-middle">
                <!-- <img
                  src="https://file.open.banchengyun.com/44/2019/01/11/2cf53a42396a8f7c61f361fc5a6ce889"
                  :class="isRightCollapsed==true?'turn-on-pic':'turn-off-pic'"
                >-->
              </div>
              <div v-if="!isRightCollapsed" class="empty-box"></div>
            </div>
          </div>
        </Header>
        <Layout>
          <Content>
            <router-view></router-view>
          </Content>
          <div class="rightSider">
            <Sider
              width="150"
              :collapsed-width="0"
              hide-trigger
              collapsible
              reverse-arrow
              v-model="isRightCollapsed"
            >
              <div v-for="item in right_Menus" class="column">
                <div class="column-item">
                  <Icon type="ios-pricetag-outline" />
                  <span class="column-title">{{item.title}}</span>
                  <div v-for="article in item.articles" class="column-article">
                    <a :href="article.href" target="_Blank" v-if="article.hide==0">{{article.title}}</a>
                  </div>
                </div>
              </div>
            </Sider>
          </div>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template> 
<script>
import routes from "@/router/routes.js";
import { LoginOut } from "@/api/recuit/login";
import Config from "@/config";

import routesData from "@/common/js/router.js";

// vuex仓库
import store from "@/store/index";

// vuex获取
import { mapGetters } from "vuex";

// 请求权限
// import { jurisdiction, getLogo } from "@/api/home";
// import { getMenuSidebar } from "api/helpCenter";
import { Info } from "api/recuit/setting";
export default {
  data () {
    return {
      // 左侧是否可以收起
      isCollapsed: false,
      //右侧是否可以收起
      isRightCollapsed: true,
      // 左侧列表
      routes: routes,

      // 展开列表
      openNames: ["overview"],

      // 顶部对应的列表
      classCName: "",

      // 左侧路由
      classAList: [],

      // 顶部路由
      classCList: [],

      // 判断这个路由当前是否有
      spareRoute: null,

      // 用户账号
      userRealname: "",

      // 账号Logo
      logo_src: "",

      //右侧菜单
      right_Menus: [],

      //路径
      pathList: [],

      menuID: "",

      spinShow: false,

      //二级菜单
      twoList: [],
      twoSelected: 0, //二级菜单选中
      clickTwoList: [],
      numberSe: 0, //记录选中

      //一级菜单选中
      oneSelected: 0
    };
  },

  // 获取所有权限
  // beforeRouteEnter(to, from, next) {
  //   jurisdiction()
  //     .then(_data => {
  //       store.commit("SET_JURISDICTION", _data.data);
  //       next();
  //     })
  //     .catch(_err => console.log(_err));
  // },
  watch: {
    // 深度监听
    $route: {
      handler (val, oldVal) {
        // 当前一级路由名
        let { classAName } = this.$route.matched[0].meta;

        // 当前二级路由名
        let { classBName } = this.$route.matched[1].meta;

        // 当前三级路由名
        let { classCName } = this.$route.matched[2].meta;

        // if (process.env.NODE_ENV == "production") {
        //   this.jurisdiction.forEach((item, index) => {
        //     if (item.classAName == classAName) {
        //       this.classCList = item.classB[classBName];
        //     }
        //   });
        // } else {
        routesData.forEach((item, index) => {
          if (item.classAName == classAName) {
            this.classCList = item.classB[classBName];
          }
        });
        // }

        // 更新顶部菜单
        this.$nextTick(() => {
          // 判断是否有顶部菜单
          if (this.$refs.topMenu) {
            this.$refs.topMenu.updateOpened();
            this.$refs.topMenu.updateActiveName();
          }
        });
        this.checkID();
      },
      deep: true
    }
  },
  computed: {
    // ...mapGetters({
    //   jurisdiction: "jurisdiction"
    // }),
    menuitemClasses: function () {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  created () {
    let infoTime = new Date().getTime();
    if (
      !localStorage.getItem("infoTime") ||
      infoTime - localStorage.getItem("infoTime") > 86400000
    ) {
      // this.$Modal.info({
      //   title: "新版本V4.38 新增内容通知",
      //   content: `1. 新增小程序底部导航栏自定义名称和调整路径，icon不支持修改，微信原生限制（需要升级新版本才能使用）</br>
      //   2. 新增开放新的企业助手，可分商品和门店查看数据；支持控制企业是否可见已退款和已过期数据，在“商城-商城基本信息”设置</br>
      //   3. 新增首页弹窗，弹窗图片内容自定义及调整自定义（需要升级新版本才能使用）</br>
      //   4. 新增会员分销功能页面“常用路径”</br>
      //   5. 全平台开放会员卡功能，需要配置底部入口提交版本后生效</br>
      //   6. 全平台开放分销2.0 功能，按文档说明进行配置使用</br>`
      // });
    }
    localStorage.setItem("infoTime", infoTime);

    this.classAList = routesData;

    // 当前一级路由名
    let { classAName } = this.$route.matched[0].meta;

    // 当前二级路由名
    let { classBName } = this.$route.matched[1].meta;

    // 当前三级路由名
    let { classCName } = this.$route.matched[2].meta;

    // if (process.env.NODE_ENV == "production") {
    //   this.jurisdiction.forEach((item, index) => {
    //     if (item.classAName == classAName) {
    //       this.classCList = item.classB[classBName];
    //     }
    //   });
    // } else {
    routesData.forEach((item, index) => {
      if (item.classAName == classAName) {
        this.classCList = item.classB[classBName];
      }
    });
    // }

    //初始化二级菜单
    this.twoList = this.classAList[0].classA;
    this.clickTwoList = this.classAList[0].classA;

    // 刷新根据路由展开对应的左侧菜单
    this.openNames.splice(
      0,
      1,
      routesData[this.$route.matched[0].meta.classAIndex].classAName
    );
    // 刷新根据路由切换对应的顶部TAB
    this.classCName = classCName;

    // 更新顶部菜单
    this.$nextTick(() => {
      // 判断是否有顶部菜单
      if (this.$refs.topMenu) {
        this.$refs.topMenu.updateOpened();
        this.$refs.topMenu.updateActiveName();
      }
    });

    Info()
      .then(result => {
        this.logo_src = result.head_img;
        this.userRealname = result.user_name;
        localStorage.setItem("logo", JSON.stringify(result.head_img));
      })
      .catch(err => {
        this.$Message.error(err);
      });

    // getLogo()
    //   .then(_res => {
    //     this.logo_src = _res.data.logo;
    //     this.userRealname = _res.data.userRealname;
    //   })
    //   .catch(err => {
    //     this.$Message.error(err.message);

    //     if (_res.data.register == 1) {
    //       localStorage.setItem("register", 1);

    //       if (!localStorage.getItem("registerStepView")) {
    //         localStorage.setItem(
    //           "registerStepView",
    //           "/wxSetting/companySetting"
    //         );
    //       }

    //       this.$router.replace({
    //         path: localStorage.getItem("registerStepView")
    //       });
    //     } else {
    //       localStorage.removeItem("register");
    //       localStorage.removeItem("registerStepView");
    //     }
    //   });

    // this.getPath()

    // process.env.NODE_ENV == "production" ? this.getPath() : this.allPath();
  },
  mounted () {
    this.checkID();
  },
  methods: {
    //选中一级菜单
    selectOneList (e, path) {
      this.oneSelected = e;
      let classAList = this.classAList[e];
      this.clickTwoList = classAList.classA;
      this.twoList = classAList.classA;
      this.$router.push(path);
    },
    //选中二级菜单栏
    selectedTwo (e) {
      this.twoSelected = e;
      console.log(this.twoSelected, e);
    },
    //改变二级菜单栏
    changeTwoList (e) {
      let index = e;
      let classAList = this.classAList[index];
      this.twoList = classAList.classA;
      this.twoSelected = -1;
    },
    //一级菜单鼠标移开
    leaveTwoList () {
      this.twoList = this.clickTwoList;
      this.twoSelected = this.numberSe;
    },
    changeRightSide () {
      this.isRightCollapsed = !this.isRightCollapsed;
    },
    //抽取路径
    // getPath() {
    //   let tmpJurisdiction = this.jurisdiction;
    //   for (var i in tmpJurisdiction) {
    //     let tmpClassAName = "/" + tmpJurisdiction[i].classAName;
    //     this.pathList.push(tmpClassAName);
    //     tmpJurisdiction[i].classA.forEach(itemA => {
    //       this.pathList.push(itemA.path);
    //       tmpJurisdiction[i].classB[itemA.classBName].forEach(itemB => {
    //         this.pathList.push(itemB.path);
    //       });
    //     });
    //   }
    // },

    // 所有路径
    // allPath() {
    //   let tmpJurisdiction = routesData;
    //   for (var i in tmpJurisdiction) {
    //     let tmpClassAName = "/" + tmpJurisdiction[i].classAName;
    //     this.pathList.push(tmpClassAName);
    //     tmpJurisdiction[i].classA.forEach(itemA => {
    //       this.pathList.push(itemA.path);
    //       tmpJurisdiction[i].classB[itemA.classBName].forEach(itemB => {
    //         this.pathList.push(itemB.path);
    //       });
    //     });
    //   }
    // },

    //判断ID
    checkID () {
      // 当前一级路由名
      let { classAName } = this.$route.matched[0].meta;
      let { classAIndex } = this.$route.matched[0].meta;

      // 当前二级路由名
      let { classBName } = this.$route.matched[1].meta;
      let { classBIndex } = this.$route.matched[1].meta;

      // 当前三级路由名
      let { classCName } = this.$route.matched[2].meta;
      let { classCIndex } = this.$route.matched[2].meta;

      // this.jurisdiction.forEach((item, index) => {
      //   if (item.classAName == classAName) {
      //     this.menuID = item.classB[classBName][classCIndex]
      //       ? item.classB[classBName][classCIndex].id
      //       : -1;
      //     this.getSideBar(this.menuID);
      //   }
      // });
    },

    getSideBar (id) {
      this.spinShow = true;
      let json = {
        menuid: id
      };
      getMenuSidebar(json).then(res => {
        this.right_Menus = res.data;
        // if (res.data.length == 0) {
        //   this.isRightCollapsed = false;
        // } else {
        //   this.isRightCollapsed = ture;
        // }
        this.spinShow = false;
      });
    },

    // 单机回收另一个下拉导航
    // singleFn(_name) {
    //   this.openNames.splice(0, 1, _name);
    //   this.$nextTick(() => {
    //     this.$refs.leftMenu.updateOpened();
    //     this.$refs.leftMenu.updateActiveName();
    //   });
    // },

    // 注销登陆
    cancellationFn (_name) {
      // 注销
      switch (_name) {
        case "cancellation":
          // loginOut()
          //   .then(_data => {
          //     window.location.href =
          //       "https://www.banchengyun.com/loginDebug.html";
          //   })
          //   .catch(_err => {
          //     console.log(_err);
          //   });
          LoginOut();
          this.$router.replace("/login");
          break;
        // case "oldEdition":
        //   window.location.href =
        //     "https://newopen.banchengyun.com/api/index/account/jumpToOld";
        //   break;
      }
    },

    // 点击左下角图标跳转官网
    tapHomeLogo () {
      window.open("https://www.banchengyun.com/");
    }

    // 检查
    // inspectFn(_obj, type) {
    //   if (process.env.NODE_ENV == "production") {
    //     switch (type) {
    //       case 1:
    //         let hasOne = Boolean(
    //           this.pathList.find(item => item == `/${_obj.classAName}`)
    //         );
    //         return hasOne;
    //         break;
    //       case 2:
    //         let hasTwo = Boolean(this.pathList.find(item => item == _obj.path));
    //         return hasTwo;
    //         break;
    //       default:
    //         let hasThree = Boolean(
    //           this.pathList.find(
    //             item => item == _obj.path && _obj.is_inner_page == 0
    //           )
    //         );
    //         return hasThree;
    //         break;
    //     }
    //   } else {
    //     return true;
    //   }
    // },

    // 需要隐藏二级路由
    // hideSecondFn(_item) {
    //   let hideArray = ["survey"];
    //   return !hideArray.find(item => {
    //     return item == _item.classAName;
    //   });
    // }
  }
};
</script>
<style scoped lang="less">
/* .aaa {
        box-shadow: 1px 0 4px rgba(0,21,41,.08);
        position: relative;
        z-index: 1;
    } */
.turn-on-pic {
  width: 22px;
  margin-left: 8px;
  transform: rotate(180deg);
  transition: all 0.5s;
}
.turn-off-pic {
  width: 22px;
  margin-left: 6px;
  transition: all 0.5s;
}
.empty-box {
  width: 102px;
}
.option-btn {
  height: 56px;
  line-height: 56px;
  // background: #FAFAFA;
  color: #666666;
  border: none;
  cursor: pointer;
  -webkit-box-flex: 1;
  box-flex: 1;
  display: -webkit-box;
  display: box;
  font-size: 14px;
  border-left: 1px solid #eeeeee;
}

.header-btn {
  height: 56px;
  line-height: 56px;
  padding: 0 12px 0 16px;
  // background: #FAFAFA;
  color: #666666;
  border: 1px solid #eeeeee;
  cursor: pointer;
  -webkit-box-flex: 1;
  box-flex: 1;
  display: -webkit-box;
  display: flex;
  border-radius: 3px;
  font-size: 14px;
  border: none;
  justify-content: center;
  align-items: center;
}
.header-btn a {
  color: #666666;
}
.header-btn a:hover {
  color: #1676eb;
}
.menu-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 20px 0 0;
}
.layout {
  height: 100%;
  background: #f0f2f5;
  position: relative;
  overflow: hidden;
}

.layout-header-bar {
  width: 100%;
  display: flex;
  align-items: center;
  background: #fff;
  // border-bottom: 1px solid #ddd;
  padding: 0;
  padding-right: 20px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: relative;
  z-index: 3;
  height: 58px;
}

.layout-header-bar span {
  font-size: 14px;
}

.layout-logo-left {
  width: 90%;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  margin: 15px auto;
}

.menu-icon {
  transition: all 0.3s;
}

.rotate-icon {
  transform: rotate(-90deg);
}

.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}

.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}

.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}

.collapsed-menu .ivu-menu .ivu-menu-item {
  padding: 14px 24px !important;
}

.shopper-logo {
  width: 100%;
  padding: 24px 0;
  box-sizing: border-box;

  img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }
}

.platform-logo {
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  padding-bottom: 20px;
  background: #444;
  left: 0;
  cursor: pointer;
  z-index: 900;
  img {
    width: 86px;
    height: 48px;
  }
}

.account-wrapper {
  height: 32px;
  line-height: 32px;
  padding: 0 12px 0 16px;
  // background: #FAFAFA;
  color: #666666;
  border: 1px solid #eeeeee;
  cursor: pointer;
  -webkit-box-flex: 1;
  box-flex: 1;
  display: -webkit-box;
  display: box;
  border-radius: 3px;
  font-size: 14px;
  border: none;
}

.ivu-dropdown-menu > .ivu-dropdown-item {
  font-size: 14px !important;
  color: rgba(0, 0, 0, 0.65);
}

.ivu-select-dropdown.ivu-dropdown-transfer {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.ivu-layout {
  background: #f0f2f5 !important;
}
//右侧菜单
.rightSider {
  .column {
    padding: 10px 0;
    margin: 10px;
    border-bottom: 1px solid #e0e0e0;
    .column-title {
    }
    .column-article {
      margin: 10px 0 10px 14px;

      a:hover {
        color: #57a3f3;
        text-decoration: underline;
      }
    }
  }
  .right-tip {
    width: 100%;
    line-height: 40px;
    font-size: 18px;
    margin: 10px;
    border-bottom: 1px solid #e0e0e0;
  }
}

//重构菜单栏
.twoMenu {
  width: 132px;
  height: 100vh;
  padding-bottom: 20px;
  background-color: #fff;
  border-right: 1px solid #ebedf0;
  .oneTitle {
    height: 56px;
    box-sizing: border-box;
    border-bottom: 1px solid #ebedf0;
    font-size: 14px;
    color: #323233;
    line-height: 56px;
    font-weight: 500;
    span {
      margin-left: 23px;
    }
  }
  .twoSelected {
    background: #ebedf0;
  }
}
.oneMenu {
  .oneTitle {
    width: 92px;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  .oneTitle:hover {
    background: #666;
  }
  .oneSelected {
    background: white;
    color: black;
  }
}
</style>
